<template>
  <div>
    <yt-crud
      ref="crudRef"
      :data="data"
      :column="column"
      v-model:page="state.page"
      v-model:query="state.query"
      :total="state.total"
      :loading="state.loading"
      :tableProps=" {
        selection: false,
        viewBtn: true,
        menuWidth: 150,
      }"
      @onLoad="getData"
      @delFun="onDelete"
      @saveFun="onSave"
    />
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'

import YtCrud from '@/components/common/yt-crud.vue'
import { getPageList, deleteReport, saveReport } from './api/report.api'
import { IReportVO } from './api/report.api'

const column: IColumn[] = [{
  label: 'id',
  key: 'id',
  type:'string',
  editDisabled: true,
  hide:true,
  formHide: true,
  rules: [],
}, {
  label: '报告名称',
  key: 'name',
  search: true,
  rules: [{ required: true, message: '名称不能为空' }],
}, {
  label: '设备ID',
  key: 'deviceId',
  hide:true,
  formHide: true,
}, {
  label: '设备名称',
  key: 'deviceName',
  search: true,
  rules: [{ required: true, message: '设备名称不能为空' }],
}, {
  label: '报告内容',
  key: 'description',
    componentProps: {
      type: 'textarea',
      rows: 4,
    },
}, {
  label: '创建时间',
  key: 'createTime',
  type: 'date',
  sortable: true,
  formHide: true,
}]

const data = ref<IReportVO[]>([])
const state = reactive({
  total: 0,
  page: {
    pageSize: 10,
    pageNum: 1,
  },
  query: {},
  loading: false
})
// 保存数据
const onSave = async ({type, data, cancel}: any) => {
  state.loading = true
  await saveReport(toRaw(data))
  state.loading = false
  cancel()
  getData()
}
// 删除
const onDelete = async (row: any) => {
  state.loading = true
  await deleteReport(row.id)
  ElMessage.success('删除成功!')
  state.loading = false
  getData()
}
// 获取数据
const getData = async () => {
  state.loading = true
  getPageList(state.page).then(res => {
    data.value = res.data.rows
    state.total = res.data.total
  }).finally(() => {
    state.loading = false
  })
}
// getData()
</script>

<!-- <style lang="scss" scoped>

</style> -->
